<template>
  <view class="box" v-if="listData && listData.length">
    <training-research-item
      v-for="item in listData"
      :key="item.questionnaireId"
      :data="item"
      @click="detail(item)"
    ></training-research-item>
  </view>
  <view v-else>
    <Empty></Empty>
  </view>
</template>

<script>
import { getTrainingResearchList } from '@/api/educational-training/training-research'
import TrainingResearchItem from './components/TrainingResearchItem'
import Empty from '@/components/cu-empty/index.vue'

export default {
  name: 'training-research',
  props: {},
  components: {
    TrainingResearchItem,
    Empty
  },
  data() {
    return {
      listData: [],
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      visible: false
    }
  },
  created() {
    this.getList()
    console.log('this.$store.state.user', this.$store.state.user)
  },
  onShow() {
    this.getList()
  },
  methods: {
    async getList(isRefresh = true) {
      const { total, rows } = await getTrainingResearchList(this.queryParams).finally(() => uni.stopPullDownRefresh())
      if (isRefresh) {
        this.listData = rows || []
      } else {
        this.listData = [...this.listData, ...rows]
      }
      this.total = total
    },
    handleOpen() {
      this.visible = true
    },
    detail({ questionnaireId }) {
      uni.navigateTo({
        url: `/pages/work/training-research/questionnaire?questionnaireId=${questionnaireId}`
      })
    }
  },
  onPullDownRefresh() {
    this.queryParams.pageNum = 1
    this.getList()
  },
  onReachBottom() {
    const { pageNum, pageSize } = this.queryParams
    if (pageNum * pageSize < this.total) {
      this.queryParams.pageNum += 1
      this.getList(false)
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  padding: 40rpx 0;
}
</style>
